<template>
	<teleport to="body">
		<transition name="el-fade-in">
			<div id="history-contextmenu" v-show="visible" :style="style">
				<span @click="toBackPage">
					<v-icon name="Back" size="14" right></v-icon>
					返回上一页
				</span>
				<span :class="[{ disabled: isHome }]" @click="toBackHome">
					<v-icon name="HomeFilled" size="14" right></v-icon>
					返回首页
				</span>
				<el-divider class="divider" />
				<span @click="$emit('on-refresh')">
					<v-icon name="Refresh" size="14" right></v-icon>
					刷新页面
				</span>
				<span v-show="!isFullPage" @click="onMaximize">
					<v-icon name="FullScreen" size="14" right></v-icon>
					最大化
				</span>
				<span v-show="isFullPage" @click="onRestore">
					<v-icon name="reduce" size="14" right></v-icon>
					恢复
				</span>
				<el-divider class="divider" />
				<span :class="[{ disabled: isHome }]" @click="onCloseTab">
					<v-icon name="Close" size="14" right></v-icon>
					关闭标签页
				</span>
				<span @click="closeOther">
					<v-icon name="Close" size="14" right></v-icon>
					关闭其他标签页
				</span>
				<span @click="closeAll">
					<v-icon name="Close" size="14" right></v-icon>
					关闭所有标签页
				</span>
			</div>
		</transition>
	</teleport>
</template>

<script setup>
import { computed } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useSettingStore } from "/store/setting"
import { useHistoryStore } from "/store/history"
import { usePosition } from "./modules/usePosition"

const props = defineProps({
	modelValue: {
		type: Boolean,
	},
})
const emits = defineEmits(["update:modelValue", "on-refresh"])

const route = useRoute()
const router = useRouter()
const settingStore = useSettingStore()
const historyStore = useHistoryStore()
const { style, updatePosition } = usePosition()

const visible = computed({
	get() {
		if (props.modelValue) {
			updatePosition()
		}
		return props.modelValue
	},
	set(value) {
		emits("update:modelValue", value)
	},
})

const isHome = computed(() => route.path === "/" || route.path === "")
const isFullPage = computed(() => settingStore.fullPage)
function toBackHome(event) {
	if (isHome.value) {
		event.stopPropagation()
		return
	}
	router.push("/")
}
function toBackPage() {
	router.back()
}
function onMaximize() {
	settingStore.fullPage = true
}
function onRestore() {
	settingStore.fullPage = false
}
function onCloseTab(event) {
	if (isHome.value) {
		event.stopPropagation()
		return
	}
	const activeIndex = historyStore.findIndex(route.path)
	if (historyStore.historyList.length > 1) {
		if (activeIndex - 1 < 0) {
			router.replace(historyStore.historyList[0].fullPath)
		} else {
			router.replace(historyStore.historyList[activeIndex - 1].fullPath)
		}
	} else {
		router.replace("/")
	}
	historyStore.deleteHistory()
}
function closeOther() {
	const history = historyStore.findHistory(route.path)
	historyStore.uploadHistory(history ? [history] : [])
}
function closeAll() {
	if (!isHome.value) {
		router.push("/")
	}
	historyStore.uploadHistory([])
}
</script>

<style lang="scss" scoped>
#history-contextmenu {
	position: fixed;
	background: #fff;
	z-index: 99;
	font-size: 14px;
	color: #333;
	box-shadow: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12),
		0px 8px 16px -8px rgba(0, 0, 0, 0.16);
	border-radius: 10px;
	padding: 12px 0;
	font-size: 14px;
	user-select: none;
	transition: opacity 0.3s ease !important;
	span {
		display: block;
		cursor: pointer;
		transition: all 0.25s;
		padding: 6px 20px;
		color: #303133;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		white-space: nowrap;
		&:not(.disabled):hover {
			background: #f0f2f5;
		}
		&.disabled {
			color: #ccc;
			cursor: not-allowed;
		}
	}
	.divider {
		height: 1px;
		margin: 5px 0;
		background: var(--el-border-color);
	}
}
</style>
